<template>
  <img
      v-for="(image, index) in images"
      :key="index"
      v-lazy-load="image.src"
      alt="Blog Image"
      class="lazy-image"
  />
</template>

<script setup>
import {onMounted, ref} from 'vue';

const images = ref([
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113225240775.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113192259847.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241021225853769.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241021225853769.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113220459108.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113191757798.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113222135766.png'},
  {src: 'https://fangcaicoding.cn/oss/assets/14-Vue%E6%9C%80%E5%B8%B8%E7%94%A8%E7%9A%84%E6%8C%87%E4%BB%A4/image-20241113191757798.png'},
])
onMounted(() => {
  console.log('mounted')
})
</script>

<style>
.lazy-image {
  width: 100%;
  height: auto;
  opacity: 0; /* 初始透明度为0，隐藏图片以便在加载后显示 */
  transition: opacity 0.5s ease-in-out; /* 添加过渡效果，图片透明度变化会在 0.5秒内平滑进行 */
}

/* 定义当图片加载完成后应用的样式 */
.lazy-image[data-loaded] {
  opacity: 1; /* 将透明度设置为1，显示图片 */
}

</style>
